<template>
	<view>
		<!-- 无商品维护页面 -->
		<view v-if="!dataswitch"><u-empty style="top:340rpx;position: relative;" text="暂无数据"></u-empty></view>

		<view class="container" v-if="dataswitch">
			<!-- 瀑布流商品列表 -->
			<view class="centergoods">
				<view class="goods-wrapper" v-if="(index + 1) % 2 != 0" v-for="(item, index) in goodsList" :key="index"
					@click="ongoods(item)">
					<image class="img" src="https://t2.jyimg.com/5f/92/a9042fdda0a3daa4e200b1249b4b/207509725o.jpg!d">
					</image>
					<view class="goods-item">
						<view class="title">
							安琪
						</view>
						<view class="item">
							<view class="Price">18岁/168cm</view>
							<view class="Sold">上海</view>
						</view>
						<view class="goods-button">
							<u-button text="打招呼" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
								shape="circle"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="centergoods">
				<view class="goods-wrapper" v-if="(index + 1) % 2 == 0" v-for="(item, index) in goodsList" :key="index"
					@click="ongoods(item)">
					<image class="img" src="https://t1.jyimg.com/cb/24/e11234510c0f41f4441ef604e78a/207197325o.jpg!d">
					</image>
					<view class="goods-item">
						<view class="title">
							小雨
						</view>
						<view class="item">
							<view class="Price">22岁/173cm</view>
							<view class="Sold">山东</view>
						</view>
						<view class="goods-button">
							<u-button text="打招呼" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
								shape="circle"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		data() {
			return {
				url: 'https://peonyoss.longchimudan.com', //阿里oss地址
				goodsList: [{
						id: '1'
					},
					{
						id: '2'
					},
					{
						id: '3'
					},
					{
						id: '4'
					},
					{
						id: '5'
					},
					{
						id: '6'
					}
				],
				dataswitch: true
			};
		},
		computed: {},
		created() {},

		methods: {
			ongoods(item) {
				uni.navigateTo({
					url: '../../pages/goods-detail/index',
				})
				console.log(item, '点击了商品，这里要跳转详情页');
			}
		}
	};
</script>

<style lang="scss">
	@import '@/styles/mixin.scss';

	.container {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #f5f5f5;
		z-index: 6;
		margin-top: 20rpx;

		.centergoods {
			padding: 5rpx 8rpx 0 8rpx;
			background-color: #f5f5f5;
			width: 50%;
			box-sizing: border-box;
			border-radius: 30rpx;

			.goods-wrapper {
				margin-top: 15rpx;
				padding: 0 0 25rpx 0;
				background-color: #ffffff;
				align-items: center;
				border-radius: 30rpx;
				overflow: hidden;
				width: 100%;

				.img {
					width: 340rpx;
					height: 340rpx;
				}

				.goods-item {
					padding-right: 20rpx;

					background-color: #ffffff;
					margin: 20rpx;

					.title {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 26rpx;
						color: #222222;
						font-weight: 400;
					}

					.item {
						margin: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						width: 100%;
						height: 55rpx;

						.Price {
							font-size: 26rpx;
							font-weight: 500;
							// color: #f53942;
						}

						.Sold {
							font-size: 26rpx;
							font-weight: 500;
							color: #888888;
						}
					}

					.goods-button {}

					//
				}
			}
		}
	}

</style>